<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TodoList</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" v-model="inputValue">
		<button v-on:click="handleBtnClick">提交</button>
		<ul>
			<todo-item v-bind:content="item" 
						v-for="item in list"></todo-item>
		</ul>
	</div>

	<script>
		//全局组件
		// Vue.component('TodoItem',{
		// 	props: ['content'],
		// 	template: "<li>{{content}}</li>"
		// })

		//局部组件
		var TodoItem = {
			props: ['content'],
			template: "<li>{{content}}</li>"
		}

		var app = new Vue({
			el: '#app',
			//局部组件注册一下, 全局组件不需要
			components: {
				TodoItem
			},
			data: {
				list: [],
				inputValue: ''
			},
			methods: {
				handleBtnClick: function(){
					this.list.push(this.inputValue)
					this.inputValue = ''
				}
			}
		})
	</script>

</body>
</html>